// 商品详情页
<template>
  <div class="product-details">
    <!-- 标题栏 -->
    <DetailsNavBar :currIndex="currentIndex" @navBarClick="itemClick"></DetailsNavBar>
    <!-- 
      滚动组件,这里需要监听滚动事件,所以probeType绑定为3,如果不需要监听滚动事件可以不绑定该属性
      滚动事件的回调,通过绑定@scroll="接受事件",并且通过回调参数获取对象对象
    -->
    <Scroll class="details-content" ref="scroll" :probeType="3" @scroll="scroll">
      <!-- 轮播图 -->
      <DetailsSwiper :topImages="topImages"></DetailsSwiper>
      <!-- 商品基本信息 -->
      <DetailsBaseINfo :goodInfo="goodInfo"></DetailsBaseINfo>
      <!-- 线条 -->
      <div class="line"></div>
      <!-- 店铺信息 -->
      <DetailsShopInfo :shopInfo="shopInfo"></DetailsShopInfo>
      <!-- 线条 -->
      <div class="line"></div>
      <!-- 商品列表信息 -->
      <DetailsGoodInfo :detailInfo="detailInfo"></DetailsGoodInfo>
      <!-- 线条 -->
      <div class="line"></div>
      <!-- 商品参数信息 -->
      <DetailsParamInfo ref="paramInfo" :itemInfo="itemParams"></DetailsParamInfo>
      <!-- 线条 -->
      <div class="line"></div>
      <!-- 商品用户评论信息 -->
      <DetailsRateInfo ref="rateInfo" :rateInfo="rate"></DetailsRateInfo>
      <!-- 线条 -->
      <div class="line"></div>
      <!-- 推荐数据信息 -->
      <GoodList ref="recommendInfo" :goodsList="recommendInfos"></GoodList>
    </Scroll>

    <!-- 底部的客服,店铺,收藏,加入购物车,购买 -->
    <DetailsBottomBar></DetailsBottomBar>

    <!-- 回到顶部 -->
    <BackTop class="back-top" @click.native="backTop" v-if="isShowBackTop"></BackTop>
  </div>
</template>
<script>
//导入滚动组件
import Scroll from "components/common/scroll/Scroll";
//导入商品详情的定义模型
import { DetailsInfo, ShopInfo } from "./bean/DetailsShop";
import { getProductDetails, getRecommonedDatas } from "network/api/details.js";
//标题
import DetailsNavBar from "./childrencomponents/DetailsNavBar";
//轮播图
import DetailsSwiper from "./childrencomponents/DetailsSwiper";
//商品基本信息
import DetailsBaseINfo from "./childrencomponents/DetailsBaseInfo";
//店铺信息
import DetailsShopInfo from "./childrencomponents/DetailsShopInfo";
//商品列表信息
import DetailsGoodInfo from "./childrencomponents/DetailsGoodInfo";
//商品参数信息
import DetailsParamInfo from "./childrencomponents/DetailsParamInfo";
//商品用户评论信息
import DetailsRateInfo from "./childrencomponents/DetailsRateInfo";
//推荐数据
import GoodList from "components/content/goodslist/GoodsList";
//底部客服,加入购物车等
import DetailsBottomBar from "./childrencomponents/DetailsBottomBar";

//导入回到顶部的混入对象
import { backTopMixin } from "utils/Mixin.js";

export default {
  //这里定义名称是为了组件不被缓存时匹配
  name: "ProductDetails",
  data() {
    return {
      //商品的iid
      iid: "",
      //轮播图的数据
      topImages: [],
      //商品展示信息
      goodInfo: {},
      //店铺信息
      shopInfo: {},
      //展示商品信息
      detailInfo: {},
      //参数信息
      itemParams: {},
      //用户评论信息
      rate: {},
      //推荐的数据列表
      recommendInfos: [],
      //Table滚动的距离数组
      tabTopArr: [],
      //navBar的选中位置
      currentIndex: 0
      //是否显示回到顶部的按钮
      // isShowBackTop: false
    };
  },
  created() {
    //获取传递的商品的iid
    this.iid = this.$route.query.iid;
    //获取详情的数据
    this.getDetailDatas();
    //获取推荐的数据
    this.getRecommendDatas();
  },
  methods: {
    //顶部NavBar的点击事件
    itemClick(index) {
      this.currentIndex = index;
      //根据NavBar点击的条目让scroll组件滚动到对应的位置即可
      this.$refs.scroll.scrollTo(0, -this.tabTopArr[index], 150);
    },
    //获取详情的数据
    getDetailDatas() {
      getProductDetails(this.iid)
        .then(res => {
          const data = res.result;
          //1.获取轮播的数据
          this.topImages = data.itemInfo.topImages;
          //2.创建商品展示对象
          this.goodInfo = new DetailsInfo(
            data.itemInfo,
            data.columns,
            data.shopInfo.services
          );
          //3.创建店铺信息
          this.shopInfo = new ShopInfo(data.shopInfo);

          //4.获取商品展示列表数据
          this.detailInfo = data.detailInfo;

          //5.获取参数信息
          this.itemParams = data.itemParams;

          //6.获取评论信息
          this.rate = data.rate;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取推荐数据
    getRecommendDatas() {
      getRecommonedDatas()
        .then(res => {
          //获取推荐的数据
          this.recommendInfos = res.data.list;
        })
        .catch(err => {
          console.log("err");
        });
    },
    //定义scroll组件刷新和记录NavBar中每个标题对应的滚动距离的方法
    sysRefreshAndRecordScrollArr() {},
    //滚动监听的回调方法
    scroll(position) {
      //控制回到顶部按钮是否显示
      if (Math.abs(position.y) > 1000) {
        this.isShowBackTop = true;
      } else {
        this.isShowBackTop = false;
      }

      //同步NavBar的条目选中状态
      for (var i = 0; i < this.tabTopArr.length - 1; i++) {
        if (
          this.currentIndex != i &&
          Math.abs(position.y) >= this.tabTopArr[i] &&
          Math.abs(position.y) < this.tabTopArr[i + 1]
        ) {
          this.currentIndex = i;
        }
      }
    }
  },
  mounted() {
    //注册图片加载完成的监听事件
    this.$bus.on("imgHasLoadCom", () => {
      //滚动进行刷新,重新计算滚动高度
      this.$refs.scroll.refresh();

      //当图片加载完成之后,分别计算每个Table栏对应的滚动距离,记录之前先清空一次
      this.tabTopArr = [];

      //商品的滚动距离
      this.tabTopArr.push(0);

      //参数的滚动距离
      this.tabTopArr.push(this.$refs.paramInfo.$el.offsetTop);

      //评论的滚动距离
      this.tabTopArr.push(this.$refs.rateInfo.$el.offsetTop);

      //推荐的滚动距离
      this.tabTopArr.push(this.$refs.recommendInfo.$el.offsetTop);

      //往数组中添加一个最大值
      this.tabTopArr.push(Number.MAX_VALUE);
    });
  },
  //混入对象
  mixins: [backTopMixin],
  destroyed() {
    //解除监听的事件
    this.$bus.off("imgHasLoadCom");
  },
  computed: {},
  components: {
    DetailsNavBar,
    DetailsSwiper,
    DetailsBaseINfo,
    DetailsShopInfo,
    DetailsGoodInfo,
    DetailsParamInfo,
    DetailsRateInfo,
    GoodList,
    DetailsBottomBar,
    Scroll
  }
};
</script>
<style lang="scss" scoped>
.details-content {
  position: absolute;
  top: 44px;
  bottom: 49px;
  overflow: hidden;
  .line {
    height: 4px;
    width: 100%;
    background-color: rgba(100, 100, 100, 0.1);
  }

  .back-top {
    position: relative;
    bottom: 49px;
    right: 0;
  }
}
</style>